<template>
  <view class="settings-container">
    <!-- 顶部头像与昵称（可选） -->
    <view class="profile" v-if="name">
      <image class="avatar" :src="avatarUrl" mode="aspectFill" />
      <text class="nickname">{{ name }}</text>
      <view class="arrow">
        <uni-icons type="right" size="16" color="#999" />
      </view>
    </view>

    <view class="section">
      <view class="item" @click="goChangePwd">
        <text class="title">修改密码</text>
        <uni-icons type="right" size="16" color="#999" />
      </view>
      <view class="item" @click="clearCache">
        <text class="title">清除缓存</text>
        <text class="extra">{{ cacheSize }}</text>
        <uni-icons type="right" size="16" color="#999" />
      </view>
      <view class="item" @click="goBrightness">
        <text class="title">屏幕亮度</text>
        <uni-icons type="right" size="16" color="#999" />
      </view>
      <view class="item" @click="checkVersion">
        <text class="title">版本检测</text>
        <text class="extra">{{ version }}</text>
        <uni-icons type="right" size="16" color="#999" />
      </view>
    </view>

    <view class="section">
      <view class="item" @click="tip('帮助中心')">
        <text class="title">帮助中心</text>
        <uni-icons type="right" size="16" color="#999" />
      </view>
      <view class="item" @click="tip('关于我们')">
        <text class="title">关于我们</text>
        <uni-icons type="right" size="16" color="#999" />
      </view>
      <view class="item" @click="tip('邀请好友')">
        <text class="title">邀请好友</text>
        <uni-icons type="right" size="16" color="#999" />
      </view>
    </view>

    <view class="logout" @click="logout">退出登录</view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
// 无需引入修改密码 API，改由子页面提交

export default {
  data() {
    return {
      cacheSize: '0KB',
      version: 'v1.0.0',
      avatarUrl: '/static/images/profile.jpg'
    }
  },
  computed: {
    ...mapGetters(['name', 'avatar', 'token'])
  },
  onLoad() {
    this.calcCacheSize()
    // 版本号：APP 端从 plus.runtime 获取；其他端从 config 或默认
    // #ifdef APP-PLUS
    this.version = 'v' + plus.runtime.version
    // #endif
    if (this.avatar) this.avatarUrl = this.avatar
  },
  methods: {
    // 页面跳转
    goChangePwd() { uni.navigateTo({ url: '/pages/settings/change-password' }) },
    goBrightness() { uni.navigateTo({ url: '/pages/settings/brightness' }) },

    // 清除缓存
    calcCacheSize() {
      try {
        const info = uni.getStorageInfoSync()
        const kb = info.currentSize // KB
        this.cacheSize = this.formatSize(kb)
      } catch (e) { this.cacheSize = '0KB' }
    },
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            try {
              uni.clearStorageSync()
              this.calcCacheSize()
              this.$modal.msgSuccess('已清除缓存')
            } catch (e) { this.$modal.msg('清除失败') }
          }
        }
      })
    },
    formatSize(kb) {
      if (kb < 1024) return kb + 'KB'
      const mb = kb / 1024
      if (mb < 1024) return mb.toFixed(1) + 'M'
      const gb = mb / 1024
      return gb.toFixed(1) + 'G'
    },

    // 亮度已在子页面实现

    // 版本检测
    checkVersion() {
      // 可接入后端版本接口；这里做本地提示
      this.$modal.msg('当前版本：' + this.version)
    },

    // 提示占位
    tip(title) { this.$modal.msg(title + ' 功能开发中') },

    // 退出登录
    async logout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: async (res) => {
          if (res.confirm) {
            await this.$store.dispatch('LogOut')
            uni.reLaunch({ url: '/pages/index' })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container { background: #f5f5f5; min-height: 100vh; }
.profile {
  display: flex; align-items: center; padding: 20rpx 30rpx; background: #fff; border-bottom: 1rpx solid #f0f0f0;
  .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; }
  .nickname { flex: 1; font-size: 30rpx; color: #333; }
  .arrow { width: 40rpx; display: flex; justify-content: flex-end; }
}
.section { margin-top: 20rpx; background: #fff; }
.item { display: flex; align-items: center; padding: 28rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
.title { flex: 1; font-size: 30rpx; color: #333; }
.extra { margin-right: 10rpx; font-size: 26rpx; color: #999; }
.logout { margin: 60rpx 30rpx; text-align: center; color: #ff4d4f; padding: 20rpx 0; background: #fff; border-radius: 12rpx; }

.pwd-dialog { width: 600rpx; background: #fff; border-radius: 16rpx; padding: 30rpx; }
.pwd-title { font-size: 32rpx; font-weight: 600; color: #333; }
.pwd-input { margin-top: 20rpx; padding: 20rpx; background: #f7f7f7; border-radius: 12rpx; }
.pwd-actions { display: flex; justify-content: flex-end; margin-top: 24rpx; }
.btn { padding: 0 26rpx; height: 72rpx; line-height: 72rpx; }
.cancel { background: #f0f0f0; margin-right: 16rpx; }
.confirm { background: #1677ff; color: #fff; }
</style>
